<template>
	<view class="container">
		<!-- 精选文章 -->
		<view class="top-img">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="issue">
			<view class="issue-top">
				中医艾灸的好处有哪些？
			</view>
			<view class="issue-text">
				<text class="_text">活血化淤</text>
				<text class="__text">风湿性疾病</text>
			</view>
		</view>
		<view class="make">
			<view class="make-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="make-info">
				<view class="name">
					艾灸治疗<text>鲍医师</text>
				</view>
				<view class="time">
					<text class="_text">60分钟</text>
					<text class="__text">每周1次/3个月</text>
				</view>
				<view class="money">
					<view class="money-left">
						<text class="_text">¥</text>
						<text class="__text">480</text>
					</view>
					<view class="money-right">
						¥5760
					</view>
				</view>
			</view>
			<view class="btn">
				去预约
			</view>
		</view>
		<view class="article">
			<view class="article-box">
				<view class="headline">
					中医艾灸的好处有哪些？
				</view>
				<view class="introduce">
					藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸
				</view>
				<view class="effect">
					一、功效
				</view>
				<view class="first">
					1、活血化瘀
				</view>
				<view class="first-text">
					藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿
				</view>
				<view class="first-img">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="first">
					2、疏落止痛
				</view>
				<view class="first-text">
					藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿藏灸有活血化瘀、舒络止痛的功效。对于风湿
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	};
</script>

<style lang="less" scoped>
	.container{
		background-color: #FFFFFF;
		.top-img{
			width: 749rpx;
			height: 500rpx;
			image{
				width: 749rpx;
				height: 500rpx;
			}
		}
		.issue{
			width: 707rpx;
			margin: auto;
			border-bottom: 2rpx solid #F4F4F6;
			.issue-top{
				margin-top: 36rpx;
				margin-bottom: 22rpx;
				height: 32rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 32rpx;
				color: #202022;
				line-height: 48rpx;
				text-align: left;
				font-style: normal;
			}
			.issue-text{
				._text{
					margin-left: 12rpx;
					display: inline-block;
					width: 118rpx;
					height: 36rpx;
					background: #F8F9F3;
					border-radius: 20rpx;
					margin-right: 16rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #202022;
					text-align: center;
					line-height: 36rpx;
				}
				.__text{
					display: inline-block;
					width: 138rpx;
					height: 36rpx;
					background: #F8F9F3;
					border-radius: 20rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #202022;
					text-align: center;
					line-height: 36rpx;
					margin-bottom: 30rpx;
				}
			}
		}
		.make{
			width: 720rpx;
			height: 216rpx;
			background: linear-gradient( 112deg, #F6F7F5 0%, #FBFFF7 100%), #F6F6F6;
			border-radius: 20rpx;
			border: 1rpx solid #F2EEEE;
			margin: auto;
			margin-top: 26rpx;
			position: relative;
			display: flex;
			.make-img{
				width: 172rpx;
				height: 172rpx;
				margin-top: 20rpx;
				margin-left: 22rpx;
				image{
					width: 172rpx;
					height: 172rpx;
				}
			}
			.make-info{
				flex: 1;
				padding-left: 20rpx;
				.name{
					height: 28rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 500;
					font-size: 28rpx;
					color: #202022;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					margin-top: 36rpx;
					text{
						margin-left: 10rpx;
						width: 120rpx;
						height: 34rpx;
						background: linear-gradient( 270deg, rgba(255,255,255,0.24) 0%, #EAD4B1 100%);
						border-radius: 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #9F918B;
						line-height: 34rpx;
						padding-left: 8rpx;
					}
				}
				.time{
					margin-top: 20rpx;
					._text{
						display: inline-block;
						width: 100rpx;
						height: 36rpx;
						background: #F6F0E8;
						border-radius: 6rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #9E918A;
						text-align: center;
						line-height: 36rpx;
					}
					.__text{
						display: inline-block;
						width: 176rpx;
						height: 36rpx;
						line-height: 36rpx;
						background: #F6F0E8;
						border-radius: 6rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #9E918A;
						text-align: center;
						margin-left: 10rpx;
					}
				}
			}
			.money{
				display: flex;
				.money-left{
					margin-top: 20rpx;
					._text{
						font-family: OPPOSans, OPPOSans;
						font-weight: normal;
						font-size: 24rpx;
						color: #C19C55;
						font-weight: 600;
					}
					.__text{
						font-family: OPPOSans, OPPOSans;
						font-weight: normal;
						font-size: 44rpx;
						color: #C19C55;
						font-weight: 600;
					}
				}
				.money-right{
					margin-top: 40rpx;
					margin-left: 10rpx;
					height: 24rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 400;
					font-size: 24rpx;
					color: #AAAAAA;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-decoration-line: line-through;
				}
			}
			.btn{
				position: absolute;
				width: 126rpx;
				height: 58rpx;
				background: #C19C55;
				border-radius: 6rpx;
				text-align: center;
				line-height: 58rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				bottom: 30rpx;
				right: 24rpx;
			}
		}
		.article{
			
			.article-box{
				padding: 0 20rpx;
				.headline{
					width: 100%;
					height: 32rpx;
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: 500;
					font-size: 32rpx;
					color: #202022;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-align: center;
					margin-bottom: 30rpx;
				}
				.introduce{
					text-indent: 32px;
					font-size: 28rpx;
					line-height: 46rpx;
				}
				.effect{
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
				.first{
					margin-bottom: 20rpx;
				}
				.first-text{
					text-indent: 32px;
					line-height: 46rpx;
				}
				.first-img{
					width: 708rpx;
					height: 472rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					image{
						width: 708rpx;
						height: 472rpx;
					}
				}
			}
		}
	}
</style>